<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import { onMounted } from "vue";
//引入语言包插件
import MapboxLanguage from "@mapbox/mapbox-gl-language";

//设置token
mapboxgl.accessToken =
  "pk.eyJ1IjoibWF5Y3BvdTExIiwiYSI6ImNtMGFsdmhlcjI3bXoya29wM2twazJ6OTAifQ.UP05NOh29hheRsk1CqgKUw";
let map: any = null;

onMounted(() => {
  map = new mapboxgl.Map({
    //指定用来装载地图的DOM容器的id
    container: "map",
    //街道地图
    style: "mapbox://styles/mapbox/streets-v12",
    // //户外地图
    // style: "mapbox://styles/mapbox/outdoors-v12",
    // //灰白色地图
    // style: "mapbox://styles/mapbox/light-v11",
    // //暗黑色地图
    // style: "mapbox://styles/mapbox/dark-v11",
    // //卫星地图，无注记
    // style: "mapbox://styles/mapbox/satellite-v9",
    // //卫星地图，有注记
    // style: "mapbox://styles/mapbox/satellite-streets-v12",
    // //导航地图，白天
    // style: "mapbox://styles/mapbox/navigation-day-v1",
    // //导航地图，夜晚
    //style: "mapbox://styles/mapbox/navigation-night-v1",

    //指定默认视图中心点的经纬度
    center: [106.55, 29.57],
    //指定默认视图的放大层级
    zoom: 8.5,
  });

  //将当前Mapbox底图的语言设置为中文简体
  const language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
  map.addControl(language);

  //添加导航条
  const nav = new mapboxgl.NavigationControl();
  map.addControl(nav, "top-right");
  //添加比例尺
  const scale = new mapboxgl.ScaleControl();
  map.addControl(scale, "bottom-left");
  //添加全屏按钮
  const fullScreen = new mapboxgl.FullscreenControl();
  map.addControl(fullScreen, "top-right");

  //默认样式加载完成后，添加图层
  map.on("style.load", () => {
    map.addSource("mapbox-dem", {
      type: "raster-dem",
      //这里加载mapbox官方提供的地形数据地址，可替换为自己的地形切片地址
      url: "mapbox://mapbox.mapbox-terrain-dem-v1",
      tileSize: 512,
      maxzoom: 14,
    });
    map.setTerrain({
      source: "mapbox-dem",
      //地形夸张比例，越大，起伏效果越明显
      exaggeration: 1.5,
    });

    addGeojsonPoint();
    //addGeojsonMultiPoint();
    //addGeojsonLine();
    //addGeojsonMultiLine();
    //addGeojsonPolygon();
    //addGeojsonMultiPolygon();
    //addMultiGeometries();
  });

});

//加载geojson 点数据
function addGeojsonPoint() {
  //点的几何结构
  const pointObj = {
    type: "Point",
    coordinates: [106.55, 29.57],
  };

  //添加数据源
  map.addSource("point", {
    type: "geojson",
    data: {
      type: "Feature",
      //几何元素的属性
      properties: {
        name:'tom',
        age:13,
        sex:'男'
      },
      geometry: pointObj,
    },
  });

  //添加图层
  map.addLayer({
    id: "point",
    source: "point",
    type: "circle",
    //点样式
    paint: {
      "circle-radius": 10,
      "circle-color": "#ff0000",
      //边框颜色
      "circle-stroke-color": "blue",
      //边框宽度
      "circle-stroke-width": 5,
      //控制发光模糊度
      "circle-blur": 0,
    },
  });
}

//加载geojson 多点数据
function addGeojsonMultiPoint(){
  //多点的几何结构
  const multilPointObj = {
    type: "MultiPoint",
    coordinates: [[106.75, 29.57],[106.95, 29.57]],
  };
  //添加数据源
  map.addSource("multiPoint", {
    type: "geojson",
    data: {
      type: "Feature",
      //注意，这里多个点只有一个公用属性
      properties: {},
      geometry: multilPointObj,
    },
  });
  //添加图层
  map.addLayer({
    id: "multiPoint",
    source: "multiPoint",
    type: "circle",
    //设置样式，每个点样式一样
    paint: {
      "circle-radius": 10,
      "circle-color": "green",
      //边框颜色
      "circle-stroke-color": "blue",
      //边框宽度
      "circle-stroke-width": 5,
      //控制发光模糊度
      "circle-blur": 0,
    },
  });
}

//加载geojson 线数据
function addGeojsonLine() {
  //线的几何结构
  const lineObj = {
    type: "LineString",
    coordinates: [
      [106.22, 29.82],
      [106.42, 29.72],
      [106.72, 29.22],
    ],
  };
  //添加数据源
  map.addSource("line", {
    type: "geojson",
    data: {
      type: "Feature",
      properties: {},
      geometry: lineObj,
    },
  });
  //添加图层
  map.addLayer({
    id: "line",
    type: "line",
    source: "line",
    layout: {
      "line-cap": "round",
    },
    //线不提供边框样式设置
    paint: {
      "line-color": "black",
      "line-width": 8,
    },
  });
}

//加载geojson 多线数据
function addGeojsonMultiLine() {
  //多线的几何结构
  const multiLineObj = {
    type: "MultiLineString",
    coordinates: [
      [
        [106.02, 29.82],
        [106.02, 29.62],
      ],
      [
        [106.22, 29.82],
        [106.22, 29.62],
      ],
    ],
  };
  //添加数据源
  map.addSource("multiLine", {
    type: "geojson",
    data: {
      type: "Feature",
      properties: {},
      geometry: multiLineObj,
    },
  });
  //添加图层
  map.addLayer({
    id: "multiLine",
    type: "line",
    source: "multiLine",
    layout: {
      "line-cap": "round",
    },
    paint: {
      "line-color": "red",
      "line-width": 8,
    },
  });
}

//加载geojson 面数据
function addGeojsonPolygon() {
  //面的几何结构
  const polygonObj = {
    type: "Polygon",
    coordinates: [
      [
        [106.29, 29.92],
        [106.79, 29.92],
        [106.72, 29.22],
        [106.52, 29.22],
        [106.29, 29.92],
      ],
    ],
  };
  //添加数据源
  map.addSource("polygon", {
    type: "geojson",
    data: {
      type: "Feature",
      properties: {},
      geometry: polygonObj,
    },
  });
  //添加图层
  map.addLayer({
    id: "polygon",
    type: "fill",
    source: "polygon",
    layout: {},
    paint: {
      "fill-color": "#0080ff",
      "fill-opacity": 0.5,
      //多边形边框，fill类型不支持设置边框宽度
      //'fill-outline-color':'#000'
    },
  });
  //通过多增加一个线图层来添加边框样式
  map.addLayer({
    id: "polygonOutline",
    type: "line",
    source: "polygon",
    layout: {},
    paint: {
      "line-color": "#000",
      "line-width": 3,
    },
  });
}

//加载geojson 多面数据
function addGeojsonMultiPolygon() {
  //多面的几何结构
  const multiPolygonObj = {
    type: "MultiPolygon",
    coordinates: [
      [
        [
          [106.19, 29.0],
          [106.79, 29.0],
          [106.79, 29.15],
          [106.19, 29.15],
          [106.19, 29.0],
        ],
      ],
      [
        [
          [106.19, 30.05],
          [106.49, 30.05],
          [106.49, 30.1],
          [106.19, 30.05],
        ],
      ],
    ],
  };
  //添加数据源
  map.addSource("multiPolygon", {
    type: "geojson",
    data: {
      type: "Feature",
      properties: {},
      geometry: multiPolygonObj,
    },
  });
  //添加图层
  map.addLayer({
    id: "multiPolygon",
    type: "fill",
    source: "multiPolygon",
    layout: {},
    paint: {
      "fill-color": "yellow",
      "fill-opacity": 1,
    },
  });
  //通过多增加一个线图层来添加边框样式
  map.addLayer({
    id: "multiPolygonOutline",
    type: "line",
    source: "multiPolygon",
    layout: {},
    paint: {
      "line-color": "#000",
      "line-width": 3,
    },
  });
}

//加载geojson 多种几何类型混合（用得少）
function addMultiGeometries(){
  //点数据
  const pointObj = {
    type: "Point",
    coordinates: [106.55, 29.57],
  };
  //线数据
  const lineObj = {
    type: "LineString",
    coordinates: [
      [106.22, 29.82],
      [106.42, 29.72],
      [106.72, 29.22],
    ],
  };
  //面数据
  const polygonObj = {
    type: "Polygon",
    coordinates: [
      [
        [106.29, 29.92],
        [106.79, 29.92],
        [106.72, 29.22],
        [106.52, 29.22],
        [106.29, 29.92],
      ],
    ],
  };

  //只添加一个点线面都包含的source
  map.addSource("multiGeometries", {
    type: "geojson",
    data: {
      //每个不同类型的几何对象作为一个Feature
      type: "FeatureCollection",
      features: [{
        type:'Feature',
        geometry:pointObj
      },{
        type:'Feature',
        geometry:lineObj
      },{
        type:'Feature',
        geometry:polygonObj
      }]
    },
  });
  //取source中的点数据渲染图层
  map.addLayer({
    id: "point",
    source: "multiGeometries",
    type: "circle",
    paint: {
      "circle-radius": 10,
      "circle-color": "#ff0000",
      "circle-stroke-color": "blue",
      "circle-stroke-width": 5,
      "circle-blur": 0,
    },
    //筛选数据源中的点数据
    filter: ['==', '$type', 'Point']
  });
  //取source中的线数据渲染图层
  map.addLayer({
    id: "line",
    type: "line",
    source: "multiGeometries",
    layout: {
      "line-cap": "round",
    },
    paint: {
      "line-color": "black",
      "line-width": 8,
    },
    //筛选数据源中的线数据
    filter: ['==', '$type', 'LineString']
  });
  //取source中的面数据渲染图层
  map.addLayer({
    id: "polygon",
    type: "fill",
    source: "multiGeometries",
    layout: {},
    paint: {
      "fill-color": "#0080ff",
      "fill-opacity": 0.5,
    },
    //筛选数据源中的面数据
    filter: ['==', '$type', 'Polygon']
  });
  //通过多增加一个线图层来添加多边形边框
  map.addLayer({
    id: "polygonOutline",
    type: "line",
    source: "multiGeometries",
    layout: {},
    paint: {
      "line-color": "#000",
      "line-width": 3,
    },
    //筛选数据源中的面数据
    filter: ['==', '$type', 'Polygon']
  });



}
</script>

<template>
  <div id="map" class="map"></div>
</template>

<style>
.map {
  flex: 1;
}
</style>
